<script setup>
import { valid } from '@utils'

const props = defineProps({
    title: String,
    value: String | Number,
    w: String,
    Color: String
})
const width = (function(title) {
    let total = 0
    for (let i = 0; i < title.length; i++) {
        let item = title[i]
        if (valid.isNumber(item) || valid.isLetter(item)) {
            total += 10
        } else if (valid.isSymbol(item)) {
            total += 10
        } else {
            total += 14
        }
    }
    return Math.max(total, 70) + 'px'
})(props.title)
</script>

<template>
    <div class="flex-align paddingY6" style="margin-bottom:10px;">
        <div class="flex-shrink0 color-2" :style="[{width: w || width},{color: Color}] ">{{title}}</div>
        <div class="color-1 marginL2">{{value}}</div>
    </div>
</template>